<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div">

        <div>
            <!--可行性研究 需求分析 总体设计 详细 。。。 测试  。。。  维护  -->
            <!--
                创建前
            1. 创建阶段: 数据代理 beforeCreate(创建前)  created(创建后)
            创建后
            2. 挂载阶段：页面渲染（将模板渲染成html）beforeMount mounted
            3. 更新阶段: 状态的更新（会触发多次）beforeUpdate updated
            4. 销毁阶段: 销毁app beforeDestory Destoryed

            每一个阶段都有两个钩子函数：
            -->

            <ul>
                <li v-for="item in arr">{{item.name}}</li>
            </ul>

        </div>

        <input type="text" v-model="msg">{{msg}}

    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.min.js"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const arr = [1, 2, 3]
        var app = Vue.createApp({

            data: function () {
                return {
                    arr: [],
                    msg: ''
                }
            },
            methods: {

            },

            //改变状态
            async created() {
                let res = await axios.get('http://www.zdtech.top:3000/v1/solars');
                this.arr = res.data.data;
                console.log('创建后', this.arr)
            },
            // 在实际开发中，非常少
            beforeCreate() {
                console.log('创建前', this.msg)
            },
            mounted() {
                console.log(this.$el);
            },
        }).mount('#div');
    </script>
</body>

</html>